<template>
  <div id="tab" :class="navsIndex !== 0 ? 'not-home' : ''">
    <cube-scroll>
    <ul>
      <li v-for="(item,index) in navs" :key="item.value" :class="navsIndex == index ? 'active':''" @click="changeNav(index)">
        <i v-if="item.icon" :class="item.icon"></i>
        {{item.label}}
      </li>
    </ul>

    <div id="type" ref="type" :class="publish.show ? 'show' : 'hide'">
      <div class="item">
          <router-link class="a" :to="$route.path.substr(1)+'/publish/normal'">
              <svg class="icon">
                <use xlink:href="#icon-zu"></use>
              </svg>
              <p>普通红包</p>
          </router-link>
      </div>

      <div class="item">
          <router-link class="a" :to="$route.path.substr(1)+'/publish/pic'">
              <svg class="icon">
                <use xlink:href="#icon-tupian1"></use>
              </svg>
              <p>图片红包</p>
          </router-link>
      </div>

      <div class="item">
          <router-link class="a" :to="$route.path.substr(1)+'/publish/video'">
              <svg class="icon">
                <use xlink:href="#icon-shipin"></use>
              </svg>
              <p>视频红包</p>
          </router-link>
      </div>

    </div>
    </cube-scroll>
  </div>
</template>

<script>
export default {
  data(){
    return {
      setting:[],  //参数
      navs:[
        {
          label: '首页',
          value:'home',
          icon:'item-icon cubeic-home'
        },
        {
          value:'publish',
          icon:'icon cubeic-add hide'
        },
        {
          label: '我',
          value:'me',
          icon:'item-icon cubeic-person'
        }
      ],
      publish:{
        show:false
      }
    }
  },
  props:{
    navsIndex:{
      type:Number,
      default:0
    }
  },
    methods:{
    /**
     * 切换tabbar
     * @param index
     */
    changeNav(index){
      if(index != 1){
        this.navs_selected = index;
      }
      let value = this.navs[index]['value'];
      if(this.$route.name !== value){
        if(value === 'home'){
          this.$router.push('/');
        }else if(value === 'me'){
          this.$router.push('/me');
        }else if(value === 'publish'){
          //显示隐藏发布类型选项
          if(this.publish.show){
            this.publish.show = false;
            this.$set(this.navs[1],'icon','icon cubeic-add hide');
          }else{
            this.publish.show = true;
            this.$set(this.navs[1],'icon','icon cubeic-add show');
          }
        }
      }
    }
  }
}
</script>


<style scoped lang="less" src="./tabbar.less"></style>

<style lang="stylus">
  #tab .cube-scroll-wrapper
    overflow visible
</style>
